<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zxx">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- bootstrap css -->
    <link rel="stylesheet" href="../../../../statics/room/css/bootstrap.min.css">
    <!-- swiper css -->
    <link rel="stylesheet" href="../../../../statics/room/css/swiper.min.css">
    <!-- fancybox css -->
    <link rel="stylesheet" href="../../../../statics/room/css/fancybox.min.css">
    <!-- font awesome css -->
    <link rel="stylesheet" href="../../../../statics/room/css/font-awesome.min.css">
    <!-- nice select css -->
    <link rel="stylesheet" href="../../../../statics/room/css/nice-select.css">
    <!-- datepicker css -->
    <link rel="stylesheet" href="../../../../statics/room/css/datepicker.css">
    <!-- mapbox css -->
    <link rel="stylesheet" href="../../../../statics/room/css/mapbox-style.css">
    <!-- kinsley css -->
    <link rel="stylesheet" href="../../../../statics/room/css/style.css">
    <!-- page title -->
    <title>Kinsley</title>
</head>

<body>

<!-- page wrapper -->
<div class="knsl-app">

    <!-- preloader -->
    <div class="knsl-preloader-frame">
        <div class="knsl-preloader">
            <img src="/statics/room/picture/logo.svg" alt="Kinsley">
            <div class="knsl-preloader-progress">
                <div class="knsl-preloader-bar"></div>
            </div>
            <div><span class="knsl-preloader-number" data-count="101">0</span>%</div>
        </div>
    </div>
    <!-- preloader end -->

    <!-- datepicker frame -->
    <div class="knsl-datepicker-place"></div>

    <!-- top bar -->
    <div class="knsl-top-bar">
        <div class="container">
            <div class="knsl-left-side">
                <!-- logo -->
                <a href="home-1.html" class="knsl-logo-frame">
                    <img src="/statics/room/picture/logo.svg" alt="Kinsley">
                </a>
                <!-- logo end -->
            </div>
            <div class="knsl-right-side">
                <!-- menu -->
                <div class="knsl-menu">
                    <nav>
                        <ul>
                            <li class="menu-item-has-children">
                                <a href="${pageContext.request.contextPath}/home/index">家</a>
                                <ul>
                                    <li><a href="home-1.html">家居类型 1</a></li>
                                    <li><a href="index.html">家居类型 2</a></li>
                                    <li><a href="home-3.html">家居类型 3</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="about.html">关于</a>
                            </li>
                            <li class="menu-item-has-children current-item">
                                <a href="rooms-1.html">房间</a>
                                <ul>
                                    <li><a href="rooms-1.html">房间列表 1</a></li>
                                    <li><a href="rooms-2.html">房间列表 2</a></li>
                                    <li><a href="">Room details</a></li>
                                </ul>
                            </li>
                            <li class="menu-item-has-children">
                                <a href="restaurant.html">餐厅</a>
                                <ul>
                                    <li><a href="restaurant.html">餐厅页面</a></li>
                                    <li><a href="menu-1.html">菜单类型 1</a></li>
                                    <li><a href="menu-2.html">菜单类型2</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="contact.html">联系</a>
                            </li>
                            <li class="menu-item-has-children">
                                <a href="blog.html">页面</a>
                                <ul>
                                    <li><a href="blog.html">博客</a></li>
                                    <li><a href="publication.html">出版物类型 1</a></li>
                                    <li><a href="publication-2.html">出版物类型 2</a></li>
                                    <li><a href="gallery.html">画廊</a></li>
                                    <li><a href="faq.html">常问问题</a></li>
                                    <li><a href="404.html">404</a></li>
                                </ul>
                            </li>
                        </ul>
                    </nav>
                </div>
                <!-- menu end -->
                <!-- action button -->
                <a id="book-popup" class="knsl-btn"><img src="../../../../statics/room/picture/bookmark.svg" alt="icon">现在预定</a>
                <!-- action button end -->
            </div>
            <!-- menu button -->
            <div class="knsl-menu-btn"><span></span></div>
            <!-- menu button end -->
        </div>
    </div>
    <!-- top bar end -->

    <!-- 旗帜 -->
    <section class="knsl-banner-simple knsl-transition-bottom">
        <img src="/statics/room/picture/palm.svg" class="knsl-deco-left" alt="palm">
        <img src="/statics/room/picture/palm.svg" class="knsl-deco-right" alt="palm">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="knsl-center knsl-title-frame">
                        <h1 class="knsl-mb-20 knsl-h1-inner">${roomType.name}</h1>
                        <ul class="knsl-breadcrumbs">
                            <li><a href="home-1.html">家</a></li>
                            <li><a href="#">房间</a></li>
                            <li><span>标准间</span></li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>
    </section>
    <!-- banner end -->

    <!-- room -->
    <div class="knsl-p-100-100">
        <div class="container">
            <div class="row" data-sticky-container="">
                <div class="col-lg-8">

                    <div class="knsl-room-detail-slider-frame knsl-mb-60">
                        <div class="swiper-container knsl-rd-slider-2 knsl-mb-10">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <a data-fancybox="gallery" href="${roomType.img1}" class="knsl-room-detail-photo-lg"
                                       data-swiper-parallax="-80" data-swiper-parallax-scale="1.2"
                                       data-swiper-parallax-duration="400">
                                        <img src="${roomType.img1}" alt="room">
                                        <span class="knsl-zoom"><i class="fas fa-search-plus"></i></span>
                                    </a>
                                </div>
                                <div class="swiper-slide">
                                    <a data-fancybox="gallery" href="${roomType.img2}" class="knsl-room-detail-photo-lg"
                                       data-swiper-parallax="-80" data-swiper-parallax-scale="1.2"
                                       data-swiper-parallax-duration="400">
                                        <img src="${roomType.img2}" alt="room">
                                        <span class="knsl-zoom"><i class="fas fa-search-plus"></i></span>
                                    </a>
                                </div>
                                <div class="swiper-slide">
                                    <a data-fancybox="gallery" href="${roomType.img3}" class="knsl-room-detail-photo-lg"
                                       data-swiper-parallax="-80" data-swiper-parallax-scale="1.2"
                                       data-swiper-parallax-duration="400">
                                        <img src="${roomType.img3}" alt="room">
                                        <span class="knsl-zoom"><i class="fas fa-search-plus"></i></span>
                                    </a>
                                </div>
                                <div class="swiper-slide">
                                    <a data-fancybox="gallery" href="${roomType.img4}" class="knsl-room-detail-photo-lg"
                                       data-swiper-parallax="-80" data-swiper-parallax-scale="1.2"
                                       data-swiper-parallax-duration="400">
                                        <img src="${roomType.img4}" alt="room">
                                        <span class="knsl-zoom"><i class="fas fa-search-plus"></i></span>
                                    </a>
                                </div>
                                <div class="swiper-slide">
                                    <a data-fancybox="gallery" href="${roomType.img5}" class="knsl-room-detail-photo-lg"
                                       data-swiper-parallax="-80" data-swiper-parallax-scale="1.2"
                                       data-swiper-parallax-duration="400">
                                        <img src="${roomType.img5}" alt="room">
                                        <span class="knsl-zoom"><i class="fas fa-search-plus"></i></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-container knsl-rd-slider-1">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="knsl-room-detail-photo-sm">
                                        <img src="${roomType.img1}" alt="room">
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="knsl-room-detail-photo-sm">
                                        <img src="${roomType.img2}" alt="room">
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="knsl-room-detail-photo-sm">
                                        <img src="${roomType.img3}" alt="room">
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="knsl-room-detail-photo-sm">
                                        <img src="${roomType.img4}" alt="room">
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="knsl-room-detail-photo-sm">
                                        <img src="${roomType.img5}" alt="room">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- description -->
                    <section class="knsl-mb-60 knsl-scroll-animation">
                        <h3 class="knsl-mb-40">好来屋正在等你!</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio veniam quibusdam fugit
                            aspernatur ratione rerum necessitatibus ipsa eligendi? Laudantium beatae aut earum ab
                            doloribus tempore veritatis repellat natus illo, veniam
                            quibusdam fugit aspernatur cumque harum quos esse libero nesciunt, molestiae saepe, possimus
                            a suscipit! Minima aspernatur quod maxime quis facere facilis magnam, animi, quia id nihil
                            reiciendis laboriosam, suscipit explicabo amet
                            quasi recusandae at</p>
                    </section>
                    <!-- description end -->

                    <!-- map -->
                    <%--          <section>--%>
                    <%--            <div class="row">--%>
                    <%--              <div class="col-lg-12">--%>
                    <%--                <h3 class="knsl-mb-40 knsl-scroll-animation">Location</h3>--%>
                    <%--              </div>--%>
                    <%--              <div class="col-lg-12">--%>

                    <%--                <div class="knsl-map-frame knsl-mb-60">--%>
                    <%--                  <div class="knsl-lock"><i class="fas fa-lock"></i></div>--%>
                    <%--                  <div id="map" class="knsl-map"></div>--%>
                    <%--                </div>--%>

                    <%--              </div>--%>
                    <%--            </div>--%>
                    <%--          </section>--%>
                    <!-- map end -->


                    <!-- features -->
                    <section class="knsl-mb-60">
                        <div class="row">
                            <div class="col-lg-12">
                                <h3 class="knsl-mb-40 knsl-scroll-animation">便利设施</h3>
                            </div>
                            <div class="col-6 col-md-3">

                                <!-- icon box -->
                                <div class="knsl-icon-box knsl-icon-box-sm knsl-scroll-animation">
                                    <img src="../../../../statics/room/picture/1.svg" alt="icon" class="knsl-mb-10">
                                    <h5>机场接送</h5>
                                </div>
                                <!-- icon box end -->

                            </div>
                            <div class="col-6 col-md-3">

                                <!-- icon box -->
                                <div class="knsl-icon-box knsl-icon-box-sm knsl-scroll-animation">
                                    <img src="../../../../statics/room/picture/2.svg" alt="icon" class="knsl-mb-10">
                                    <h5>全包</h5>
                                </div>
                                <!-- icon box end -->

                            </div>
                            <div class="col-6 col-md-3">

                                <!-- icon box -->
                                <div class="knsl-icon-box knsl-icon-box-sm knsl-scroll-animation">
                                    <img src="../../../../statics/room/picture/3.svg" alt="icon" class="knsl-mb-10">
                                    <h5>有空调</h5>
                                </div>
                                <!-- icon box end -->

                            </div>
                            <div class="col-6 col-md-3">

                                <!-- icon box -->
                                <div class="knsl-icon-box knsl-icon-box-sm knsl-scroll-animation">
                                    <img src="../../../../statics/room/picture/4.svg" alt="icon" class="knsl-mb-10">
                                    <h5>受到保护</h5>
                                </div>
                                <!-- icon box end -->

                            </div>
                            <div class="col-6 col-md-3">

                                <!-- icon box -->
                                <div class="knsl-icon-box knsl-icon-box-sm knsl-scroll-animation">
                                    <img src="../../../../statics/room/picture/5.svg" alt="icon" class="knsl-mb-10">
                                    <h5>4 个私人泳池</h5>
                                </div>
                                <!-- icon box end -->

                            </div>
                            <div class="col-6 col-md-3">

                                <!-- icon box -->
                                <div class="knsl-icon-box knsl-icon-box-sm knsl-scroll-animation">
                                    <img src="../../../../statics/room/picture/6.svg" alt="icon" class="knsl-mb-10">
                                    <h5>免费无线网</h5>
                                </div>
                                <!-- icon box end -->

                            </div>
                            <div class="col-6 col-md-3">

                                <!-- icon box -->
                                <div class="knsl-icon-box knsl-icon-box-sm knsl-scroll-animation">
                                    <img src="../../../../statics/room/picture/7.svg" alt="icon" class="knsl-mb-10">
                                    <h5>智能电视</h5>
                                </div>
                                <!-- icon box end -->

                            </div>
                            <div class="col-6 col-md-3">

                                <!-- icon box -->
                                <div class="knsl-icon-box knsl-icon-box-sm knsl-scroll-animation">
                                    <img src="../../../../statics/room/picture/8.svg" alt="icon" class="knsl-mb-10">
                                    <h5>洗衣店</h5>
                                </div>
                                <!-- icon box end -->

                            </div>
                        </div>
                    </section>
                    <!-- features end -->

                    <!-- services -->
                    <section class="knsl-mb-30">
                        <div class="row">
                            <div class="col-lg-12">
                                <h3 class="knsl-mb-40 knsl-scroll-animation">Around The Hotel</h3>
                            </div>
                            <div class="col-lg-4">

                                <!-- service card -->
                                <div class="knsl-ath-card knsl-scroll-animation">
                                    <div class="knsl-cover-frame">
                                        <img src="../../../../statics/room/picture/44.jpg" alt="cover">
                                    </div>
                                    <div class="knsl-card-description">
                                        <h5>游戏室</h5>
                                    </div>
                                </div>
                                <!-- service card end -->

                            </div>
                            <div class="col-lg-4">

                                <!-- service card -->
                                <div class="knsl-ath-card knsl-scroll-animation">
                                    <div class="knsl-cover-frame">
                                        <img src="../../../../statics/room/picture/22.jpg" alt="cover">
                                    </div>
                                    <div class="knsl-card-description">
                                        <h5>水池</h5>
                                    </div>
                                </div>
                                <!-- service card end -->

                            </div>
                            <div class="col-lg-4">

                                <!-- service card -->
                                <div class="knsl-ath-card knsl-scroll-animation">
                                    <div class="knsl-cover-frame">
                                        <img src="../../../../statics/room/picture/32.jpg" alt="cover">
                                    </div>
                                    <div class="knsl-card-description">
                                        <h5>餐厅</h5>
                                    </div>
                                </div>
                                <!-- service card end -->

                            </div>
                        </div>
                    </section>
                    <!-- services end -->

                    <!-- reviews -->
                    <section class="knsl-mb-30">
                        <div class="row">
                            <div class="col-lg-12">
                                <h3 class="knsl-mb-40 knsl-scroll-animation">Reviews</h3>
                            </div>
                            <div class="col-lg-12">

                                <div class="knsl-review-card knsl-scroll-animation">
                                    <div class="knsl-card-header">
                                        <div class="knsl-name-and-photo">
                                            <div class="knsl-avatar-frame">
                                                <img src="../../../../statics/room/picture/33.jpg" alt="Avatar">
                                            </div>
                                            <div>
                                                <h5>Sofia Oldman</h5>
                                                <span>14.07.2021</span>
                                            </div>
                                        </div>
                                        <ul class="knsl-stars">
                                            <li><i class="fas fa-star"></i></li>
                                            <li><i class="fas fa-star"></i></li>
                                            <li><i class="fas fa-star"></i></li>
                                            <li><i class="fas fa-star"></i></li>
                                            <li><i class="fas fa-star"></i></li>
                                        </ul>
                                    </div>
                                    <blockquote>
                                        Dequi folores dolor sit amet, consectetur adipisicing elit. Nesciunt illo,
                                        delectus totam! Delectus illo magnam voluptatem a tempora id vitae dolor, quis
                                        natus iusto molestiae ab nam error vero possimus ullam facilis porro
                                        veritatis.
                                    </blockquote>

                                </div>

                            </div>
                            <div class="col-lg-12">

                                <div class="knsl-review-card knsl-scroll-animation">
                                    <div class="knsl-card-header">
                                        <div class="knsl-name-and-photo">
                                            <div class="knsl-avatar-frame">
                                                <img src="../../../../statics/room/picture/23.jpg" alt="Avatar">
                                            </div>
                                            <div>
                                                <h5>Emma Newman</h5>
                                                <span>14.07.2021</span>
                                            </div>
                                        </div>
                                        <ul class="knsl-stars">
                                            <li><i class="fas fa-star"></i></li>
                                            <li><i class="fas fa-star"></i></li>
                                            <li><i class="fas fa-star"></i></li>
                                            <li><i class="fas fa-star"></i></li>
                                            <li class="knsl-empty"><i class="fas fa-star"></i></li>
                                        </ul>
                                    </div>
                                    <blockquote>
                                        Dequi folores dolor sit amet, consectetur adipisicing elit. Nesciunt illo,
                                        delectus totam! Delectus illo magnam voluptatem a tempora id vitae dolor, quis
                                        natus iusto molestiae ab nam error vero possimus ullam facilis porro
                                        veritatis.
                                    </blockquote>

                                </div>

                            </div>
                        </div>
                    </section>
                    <!-- reviews end -->

                    <section>
                        <div class="row">
                            <div class="col-lg-12">
                                <h3 class="knsl-mb-40 knsl-scroll-animation">Leave a review</h3>
                            </div>
                            <div class="col-lg-12">
                                <form class="knsl-scroll-animation">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <input type="text" placeholder="Name">
                                        </div>
                                        <div class="col-lg-6">
                                            <input type="email" placeholder="Email">
                                        </div>
                                        <div class="col-lg-12">
                                            <textarea name="name" rows="8" placeholder="Text"></textarea>
                                        </div>
                                        <div class="col-lg-12">
                                            <div class="knsl-form-submit-frame">
                                                <!-- temporary button to show the popup -->
                                                <a class="knsl-btn" data-fancybox="" href="#knsl-success">Send</a>
                                                <!-- <button class="knsl-btn">Send</button> -->
                                                <div class="knsl-text-sm">*We promise not to disclose your personal
                                                    information to third parties.
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </section>

                </div>
                <div class="col-lg-4">
                    <!-- sidebar -->
                    <div class="knsl-sticky knsl-stycky-right" data-margin-top="100">

                        <!-- room info -->
                        <div class="knsl-room-features-lg knsl-mb-20">
                            <div class="knsl-feature">
                                <div class="knsl-icon-frame"><img src="../../../../statics/room/picture/bed.svg"
                                                                  alt="icon"></div>
                                <span>${roomType.bed}</span>
                            </div>
                            <div class="knsl-feature">
                                <div class="knsl-icon-frame"><img src="../../../../statics/room/picture/square.svg"
                                                                  alt="icon"></div>
                                <span>${roomType.stere}</span>
                            </div>
                        </div>
                            <!-- room info end -->

                            <div class="knsl-price-card knsl-mb-20">
                                <div class="knsl-price-number">${roomType.price}<span>/晚</span></div>
                                <div class="knsl-btn">Reservation</div>
                        </div>

                        <%--            <div class="knsl-book-form">--%>
                        <%--              <form>--%>
                        <%--                <div class="row">--%>
                        <%--                  <div class="col-lg-12">--%>
                        <%--                    <div class="knsl-input-frame">--%>
                        <%--                      <label for="check-in">Check in</label>--%>
                        <%--                      <input id="check-in" type="text" class="datepicker-here" data-position="bottom left" placeholder="Select date" autocomplete="off" readonly="readonly">--%>
                        <%--                    </div>--%>
                        <%--                  </div>--%>
                        <%--                  <div class="col-lg-12">--%>
                        <%--                    <div class="knsl-input-frame">--%>
                        <%--                      <label for="check-out" class="knsl-add-icon">Check out</label>--%>
                        <%--                      <input id="check-out" type="text" class="datepicker-here" data-position="bottom left" placeholder="Select date" autocomplete="off" readonly="readonly">--%>
                        <%--                    </div>--%>
                        <%--                  </div>--%>
                        <%--                  <div class="col-6">--%>
                        <%--                    <div class="knsl-select-frame">--%>
                        <%--                      <label for="person">Person</label>--%>
                        <%--                      <select id="person">--%>
                        <%--                        <option value="1">1</option>--%>
                        <%--                        <option value="2">2</option>--%>
                        <%--                        <option value="3">3</option>--%>
                        <%--                        <option value="4" disabled="">4</option>--%>
                        <%--                      </select>--%>
                        <%--                    </div>--%>
                        <%--                  </div>--%>
                        <%--                  <div class="col-6">--%>
                        <%--                      <div class="knsl-select-frame">--%>
                        <%--                        <label for="children">Childrens</label>--%>
                        <%--                        <select id="children">--%>
                        <%--                          <option value="1">1</option>--%>
                        <%--                          <option value="2">2</option>--%>
                        <%--                          <option value="3">3</option>--%>
                        <%--                          <option value="4" disabled="">4</option>--%>
                        <%--                        </select>--%>
                        <%--                    </div>--%>
                        <%--                  </div>--%>
                        <%--                  <div class="col-lg-12 knsl-center">--%>
                        <%--                    <button type="submit" class="knsl-btn"><img src="../../../../statics/room/picture/search.svg" class="knsl-zoom" alt="icon">Serch room</button>--%>
                        <%--                  </div>--%>
                        <%--                </div>--%>
                        <%--              </form>--%>
                        <%--            </div>--%>

                        <%--          </div>--%>
                        <!-- sidebar end -->

                    </div>
                </div>
            </div>
        </div>
        <!-- room end -->

        <!-- rooms -->
        <section class="knsl-transition-top knsl-p-0-80" style="background-color: #ECFAFB">
            <img src="../../../../statics/room/picture/palm.svg" class="knsl-deco-left" alt="palm">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-12">

                        <div class="knsl-center knsl-title-frame knsl-scroll-animation knsl-mb-100">
                            <h2 class="knsl-mb-20">Similar Rooms</h2>
                            <p class="knsl-mb-30">Consectetur adipisicing elit. Nihil, illum voluptate eveniet ex fugit
                                ea delectus, sed voluptatem. Laborum accusantium libero commodi id officiis itaque esse
                                adipisci, necessitatibus asperiores, illo odio.</p>
                            <a href="rooms-1.html" class="knsl-btn knsl-btn-md">All rooms</a>
                        </div>

                    </div>
                    <div class="col-lg-4">


                        <!-- room card -->
                        <div class="knsl-room-card knsl-scroll-animation">
                            <div class="knsl-cover-frame">
                                <a href=""><img src="../../../../statics/room/picture/12.jpg" alt="cover"></a>
                                <div class="knsl-badge">Popular</div>
                            </div>
                            <div class="knsl-description-frame">
                                <div class="knsl-room-features">
                                    <div class="knsl-feature">
                                        <div class="knsl-icon-frame"><img src="../../../../statics/room/picture/bed.svg"
                                                                          alt="icon"></div>
                                        <span>4 Guests</span>
                                    </div>
                                    <div class="knsl-feature">
                                        <div class="knsl-icon-frame"><img
                                                src="../../../../statics/room/picture/square.svg" alt="icon"></div>
                                        <span>95 Ft²</span>
                                    </div>
                                </div>
                                <a href="">
                                    <h3 class="knsl-mb-20">Deluxe room</h3>
                                </a>
                                <div class="knsl-text-light knsl-text-sm knsl-mb-20">Libero non aut dignissimos optio
                                    hic laudantium ex maiores enim et consequatur corrupti omnis.
                                </div>
                                <div class="knsl-card-bottom">
                                    <div class="knsl-price">$175.0<span>/晚</span></div>
                                    <a href="" class="knsl-btn"><img src="../../../../statics/room/picture/bookmark.svg"
                                                                     alt="icon">Book now</a>
                                </div>
                            </div>
                        </div>
                        <!-- room card end -->

                    </div>
                    <div class="col-lg-4">

                        <!-- room card -->
                        <div class="knsl-room-card knsl-scroll-animation">
                            <div class="knsl-cover-frame">
                                <a href=""><img src="../../../../statics/room/picture/21.jpg" alt="cover"></a>
                                <div class="knsl-badge">Popular</div>
                            </div>
                            <div class="knsl-description-frame">
                                <div class="knsl-room-features">
                                    <div class="knsl-feature">
                                        <div class="knsl-icon-frame"><img src="../../../../statics/room/picture/bed.svg"
                                                                          alt="icon"></div>
                                        <span>2 Guests</span>
                                    </div>
                                    <div class="knsl-feature">
                                        <div class="knsl-icon-frame"><img
                                                src="../../../../statics/room/picture/square.svg" alt="icon"></div>
                                        <span>50 Ft²</span>
                                    </div>
                                </div>
                                <a href="">
                                    <h3 class="knsl-mb-20">Standart Room</h3>
                                </a>
                                <div class="knsl-text-light knsl-text-sm knsl-mb-20">Libero non aut dignissimos optio
                                    hic laudantium ex maiores enim et consequatur corrupti omnis.
                                </div>
                                <div class="knsl-card-bottom">
                                    <div class="knsl-price">$75.0<span>/night</span></div>
                                    <a href="" class="knsl-btn"><img src="../../../../statics/room/picture/bookmark.svg"
                                                                     alt="icon">Book now</a>
                                </div>
                            </div>
                        </div>
                        <!-- room card end -->

                    </div>
                    <div class="col-lg-4">

                        <!-- room card -->
                        <div class="knsl-room-card knsl-scroll-animation">
                            <div class="knsl-cover-frame">
                                <a href=""><img src="../../../../statics/room/picture/31.jpg" alt="cover"></a>
                                <div class="knsl-badge">Popular</div>
                            </div>
                            <div class="knsl-description-frame">
                                <div class="knsl-room-features">
                                    <div class="knsl-feature">
                                        <div class="knsl-icon-frame"><img src="../../../../statics/room/picture/bed.svg"
                                                                          alt="icon"></div>
                                        <span>4 Guests</span>
                                    </div>
                                    <div class="knsl-feature">
                                        <div class="knsl-icon-frame"><img
                                                src="../../../../statics/room/picture/square.svg" alt="icon"></div>
                                        <span>95 Ft²</span>
                                    </div>
                                </div>
                                <a href="">
                                    <h3 class="knsl-mb-20">Deluxe room</h3>
                                </a>
                                <div class="knsl-text-light knsl-text-sm knsl-mb-20">Libero non aut dignissimos optio
                                    hic laudantium ex maiores enim et consequatur corrupti omnis.
                                </div>
                                <div class="knsl-card-bottom">
                                    <div class="knsl-price">$175.0<span>/night</span></div>
                                    <a href="" class="knsl-btn"><img src="../../../../statics/room/picture/bookmark.svg"
                                                                     alt="icon">Book now</a>
                                </div>
                            </div>
                        </div>
                        <!-- room card end -->

                    </div>
                </div>
            </div>
        </section>
        <!-- rooms end -->

        <!-- footer -->
        <footer>
            <div class="knsl-footer">
                <div class="container knsl-p-100-100">
                    <div class="row">
                        <div class="col-md-6 col-lg-4">
                            <img class="knsl-footer-logo" src="../../../../statics/room/picture/logo-w.svg"
                                 alt="Kinsley">
                            <div class="knsl-footer-about">Sequi dolores ratione eos eveniet provident soluta. Omnis
                                nesciunt sit eos at, eius voluptatum rem corporis. Doloremque labore assumenda
                                explicabo velit illo, soluta rem, inventore hic.
                            </div>
                            <div class="knsl-footer-social">
                                <a href=""><i class="fab fa-twitter"></i></a>
                                <a href=""><i class="fab fa-facebook-f"></i></a>
                                <a href=""><i class="fab fa-youtube"></i></a>
                                <a href=""><i class="fab fa-instagram"></i></a>
                                <a href=""><i class="fab fa-linkedin-in"></i></a>
                            </div>
                        </div>

                        <div class="col-md-6 col-lg-2">
                            <h4>Menu</h4>
                            <ul class="knsl-footer-menu">
                                <li><a href="#.">Home</a></li>
                                <li><a href="#.">About us</a></li>
                                <li><a href="#.">Rooms</a></li>
                                <li><a href="#.">Our services</a></li>
                                <li><a href="#.">Contact info</a></li>
                            </ul>
                        </div>
                        <div class="col-md-6 col-lg-3">
                            <h4>Meet Kinsley</h4>
                            <ul class="knsl-footer-menu">
                                <li><a href="#.">条款和条件</a></li>
                                <li><a href="#.">Privacy policy</a></li>
                                <li><a href="#.">Help center</a></li>
                                <li><a href="#.">Work with us</a></li>
                                <li><a href="#.">Sitemap</a></li>
                            </ul>
                        </div>


                        <div class="col-md-6 col-lg-3">
                            <h4>Instagram</h4>
                            <div class="footer-insta">
                                <a href=""><img src="../../../../statics/room/picture/11.jpg" alt="Image"></a>
                                <a href=""><img src="../../../../statics/room/picture/2.jpg" alt="Image"></a>
                                <a href=""><img src="../../../../statics/room/picture/3.jpg" alt="Image"></a>
                                <a href=""><img src="../../../../statics/room/picture/4.jpg" alt="Image"></a>
                                <a href=""><img src="../../../../statics/room/picture/5.jpg" alt="Image"></a>
                                <a href=""><img src="../../../../statics/room/picture/6.jpg" alt="Image"></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="knsl-copyright">
                    <div class="container">
                        <div class="copy-text">
                            <div>Copyright &copy; 2021.Company name All rights reserved.<a target="_blank"
                                                                                           href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
                            </div>
                        </div>
                        <div class="copy-menu">
                            <div>Design by: <a href="javascript:;">Nazar Miller</a></div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- footer end -->

        <!-- popup -->
        <div id="knsl-success" class="knsl-popup">
            <img src="../../../../statics/room/picture/12.svg" alt="success" class="knsl-succes-icon">
            <h2 class="knsl-mb-20">Success</h2>
            <p>However, message not sent. <br>This pop-up exists for demonstration.</p>
        </div>
        <!-- popup end -->

        <!-- popup -->
        <div class="knsl-popup-frame">
            <div class="knsl-book-form knsl-book-popup">
                <span class="knsl-close-popup">+</span>
                <h2 class="knsl-mb-20 knsl-h1-inner">${roomType.name}</h2>
<%--                <h2 class="knsl-mb-40">搜索您的房间</h2>--%>
                <form action="#" >
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="knsl-input-frame">
                                <label>入住时间</label>
                                <input type="text" class="datepicker-here" data-position="bottom left"
                                       placeholder="Select date" autocomplete="off" readonly="readonly" id="data"
                                       name="data">
                                <span id="a1" style="color: red"></span>
                            </div>
                            <div class="col-lg-12">
                                <div class="knsl-input-frame">
                                    <label class="knsl-add-icon">离店时间</label>
                                    <input type="text" class="datepicker-here" data-position="bottom left"
                                           placeholder="Select date" autocomplete="off" readonly="readonly" id="data1"
                                           name="data1">
                                    <span id="b1" style="color: red"></span>
                                </div>
                                <div class="col-lg-12">
                                    <div class="knsl-select-frame">
                                        <label>姓名</label>
                                        <input type="text" name="name" id="name" value="${account.name}"/>
                                        <span id="c1" style="color: red"></span>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="knsl-select-frame">
                                        <label>电话</label>
                                        <input type="text" maxlength="11" name="mobile" id="mobile"
                                               value="${account.mobile}"/>
                                        <span id="d1" style="color: red"></span>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="knsl-select-frame">
                                        <label>身份证号</label>
                                        <input type="text" name="idCard" id="idCard" value="152145236589658745">
                                        <span id="e1" style="color: red"></span>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="knsl-select-frame">
                                        <label>房费总计</label>
                                        <span class="total">￥${roomType.price}</span>
                                        <input type="hidden" id="price" name="price" value="${roomType.price}" />
                                    </div>
                                </div>
                                <div class="col-lg-12 knsl-center">
                                    <button type="button" class="knsl-btn" id="btn"><img
                                            src="../../../../statics/room/picture/search.svg" class="knsl-zoom"
                                            alt="icon">支付
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!-- popup end -->

    </div>
    <!-- page wrapper end -->

    <!-- jquery js -->
    <script src="/statics/room/js/jquery.min.js"></script>
    <!-- bootstrap js -->
    <script src="/statics/room/js/bootstrap.min.js"></script>
    <!-- nice select js -->
    <script src="/statics/room/js/jquery.nice-select.min.js"></script>
    <!-- datepicker js -->
    <script src="/statics/room/js/datepicker.js"></script>
    <!-- smooth scroll js -->
    <script src="/statics/room/js/smooth-scroll.js"></script>
    <!-- isotope js -->
    <script src="/statics/room/js/isotope.min.js"></script>
    <!-- mapbox js -->
    <script src="/statics/room/js/mapbox.min.js"></script>
    <!-- fancybox js -->
    <script src="/statics/room/js/fancybox.min.js"></script>
    <!-- swiper js -->
    <script src="/statics/room/js/swiper.min.js"></script>
    <!-- sticky js -->
    <script src="/statics/room/js/sticky.js"></script>
    <!-- kinsley js -->
    <script src="/statics/room/js/main.js"></script>
</body>
<script>
    var data = $("#data").val();
    var data1 = $("#data1").val();

    //mouseleave
    $("#data1").mouseup(function () {
        var data = $("#data").val();
        var data1 = $("#data1").val()
        if ((data != null && data != '') && (data1 != null && data1 != '')) {


            var price = $("#price").val();
            //获得日期毫秒数

            var date = Date.parse($("#data").val());
            console.log(date)
            var date1 = Date.parse($("#data1").val());
            console.log(date1)
            //日期毫秒单位相减再转化为天数
            var day = date / 1000 / 60 / 60 / 24
            var day1 = date1 / 1000 / 60 / 60 / 24
            var rw = day1 - day;
            //修改值
            $(".total").text(price * rw)
        }
    })
    $("#btn").click(function(){
        check()
    })

 function check() {
        if ($("#data").val() == '') {
            $("#a1").text("入住时间不能为空")
            return false
        }
        if ($("#data1").val() == '') {
            $("#b1").text("离店时间不能为空")
            return false
        }
        if ($("#name").val() == '') {
            $("#c1").text("姓名不能为空")
            return false
        }

        if ($("#mobile").val() == '') {
            $("#d1").text("电话不能为空")
            return false
        }
        if ($("#idCard").val() == '') {
            $("#e1").text("身份证不能为空")
            return false
        }
        var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if (reg.test($("#idCard").val()) === false) {
            $("#e1").text("身份证格式不正确")
            return false;
        }
        var names = $("#names").val();
        var mobile = $("#mobile").val();
        var idCard = $("#idCard").val();
        var arriveDate=$("#data").val();
        var leaveDate=$("#data1").val();
        var remark = $("#remark").val();
        var name = $("#name").val();
        var price2 = $("#price").val();
        // var aaa=$(".total").text();
        // alert("aaaa"+price2);
        $.ajax({
            url: 'rooms',
            type: 'post',
            dataType: 'json',
            data: {
                roomTypeId: '${roomType.id }',
                name: name,
                mobile: mobile,
                idCard: idCard,
                remark: remark,
                arriveDate: arriveDate,
                leaveDate: leaveDate,
                price: price2,
                names: names
            },
            success: function (data) {
                alert("1111")
                console.log(data)
                if (data.type == 'success') {
                   // alert(price)
                    $(".malog").show();
                    setTimeout(function () {
                         window.location.href = 'http://localhost:8080/pay';
                    }, 1000)
                } else {
                    alert(data.msg);
                }
            }
        });
     return true;
    }

</script>

</html>
